<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ $t('message.rlfx') }}</div>
    <el-cascader
      v-model="entityValueList"
      style="width:400px;"
      :options="entrtyList"
      :props="props"
      clearable
      :placeholder="$t('message.qxzstcrmchxlh')"
    />
    <div class="doumee-filter">
      <el-date-picker
        v-model="date"
        type="date"
        :placeholder="$t('message.xzrq')"
        value-format="yyyy-MM-dd"
        :clearable="false"
      />
      <el-time-select
        v-model="startTime"
        :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '24:00'
        }"
        :placeholder="$t('message.qxz') + $t('message.kssj')"
        :clearable="false"
        format="HH:mm:ss"
      />
      <el-time-select
        v-model="endTime"
        :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '24:00'
        }"
        :placeholder="$t('message.qxz') + $t('message.jssj')"
        :clearable="false"
        value-format="HH:mm:ss"
      />
      <el-button v-preventReClick type="primary" @click="search">{{ $t('message.cz') }}</el-button>
      <el-button v-preventReClick @click="clear">{{ $t('message.clear') }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" :label="$t('message.time')" prop="time" />
      <el-table-column align="center" :label="$t('message.jczsrc')" prop="totlEntries" width="200" />
      <el-table-column align="center" :label="$t('message.cczsrc')" prop="totlOut" width="200" />
      <el-table-column align="center" :label="$t('message.zcrsr')" prop="totlPresence" width="200" />
      <el-table-column align="center" :label="$t('message.rymddw')" prop="crowdDensity" width="200" />
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { crowdedCount, crowdedSearch } from '@/api'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      current: 1,
      page: 1,
      totalCount: 10,
      list: [
      ],
      listLoading: true,
      entrtyList: [
        {
          value: 'zhinan',
          label: this.$t('message.zhinan'),
          children: [
            {
              value: 'shejiyuanze',
              label: this.$t('message.slyz'),
              children: [
                { value: 'yizhi', label: this.$t('message.yizhi') },
                { value: 'fankui', label: this.$t('message.fanku') },
                { value: 'xiaolv', label: this.$t('message.xiaolu') },
                { value: 'kekong', label: this.$t('message.kekon') }
              ]
            },
            {
              value: 'daohang',
              label: this.$t('message.daohan'),
              children: [
                { value: 'cexiangdaohang', label: this.$t('message.cxdh') },
                { value: 'dingbudaohang', label: this.$t('message.dbdh') }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          label: this.$t('message.zujian'),
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                { value: 'layout', label: this.$t('message.basic1') },
                { value: 'color', label: this.$t('message.basic2') },
                { value: 'typography', label: this.$t('message.basic3') },
                { value: 'icon', label: this.$t('message.basic4') },
                { value: 'button', label: this.$t('message.basic5') }
              ]
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                { value: 'radio', label: this.$t('message.form1') },
                { value: 'checkbox', label: this.$t('message.form2') },
                { value: 'input', label: this.$t('message.form3') },
                { value: 'input-number', label: this.$t('message.form4') },
                { value: 'select', label: this.$t('message.form5') },
                { value: 'cascader', label: this.$t('message.form6') },
                { value: 'switch', label: this.$t('message.form7') },
                { value: 'slider', label: this.$t('message.form8') },
                { value: 'time-picker', label: this.$t('message.form9') },
                { value: 'date-picker', label: this.$t('message.form10') },
                { value: 'datetime-picker', label: this.$t('message.form11') },
                { value: 'upload', label: this.$t('message.form12') },
                { value: 'rate', label: this.$t('message.form13') },
                { value: 'form', label: this.$t('message.form14') }
              ]
            }
          ]
        }
      ],
      entityValueList: [],
      date: parseTime(new Date(), '{yyyy}-{mm}-{dd}'),
      startTime: '00:00',
      endTime: '24:00'
    }
  },
  computed: {
    props() {
      return {
        size: 'medium',
        value: 'id',
        expandTrigger: this.expandTrigger, // 展开触发方式
        checkStrictly: true
      }
    }
  },
  created() {
    this.listLoading = false
    this.initData()
  },
  methods: {
    selectStartTime(v) {
      console.log(v)
      this.startTime = v + ':00'
    },
    selectEndTime(v) {
      console.log(v)
      this.endTime = v + ':00'
    },
    handleCurrentChange(val) {
      // console.log(`当前页:`, val)
      this.page = val
      this.getCrowdList()
    },
    initData() {
      crowdedSearch({ param: { venueId: sessionStorage.getItem('venueId') }}).then(res => {
        if (res.errorCode !== '000000') return
        this.entrtyList = res.record.entityDOList
        const jsStr = JSON.stringify(this.entrtyList)
          .replace(/entityName/g, 'label')
          .replace(/aisleDOList/g, 'children')
          .replace(/name/g, 'label')
          .replace(/crowdedEquipmentDOList/g, 'children')
          .replace(/deviceSn/g, 'label')
        this.entrtyList = JSON.parse(jsStr)
        console.log(this.entrtyList)
      })
      this.getCrowdList()
    },
    getCrowdList() {
      const param = {}
      param.venueId = sessionStorage.getItem('venueId')

      if (this.entityValueList[0]) {
        param.entrtyId = this.entityValueList[0]
      }
      if (this.entityValueList[1]) {
        param.doorId = this.entityValueList[1]
      }
      if (this.entityValueList[2]) {
        param.deviceId = this.entityValueList[2]
      }
      param.startTime = this.date + ' ' + this.startTime + ':00'
      param.endTime = this.date + ' ' + this.endTime + ':00'
      // console.log('param', param)
      crowdedCount({
        pagination: {
          firstQueryTime: parseTime(new Date()),
          page: this.page,
          rows: 10
        },
        param,
        gymId: sessionStorage.getItem('venueId')
      }).then(res => {
        if (res.errorCode !== '000000') return
        this.list = res.record
      })
    },
    clear() {
      this.filters.checkedStatus = null
      this.page = 1
      this.totalCount = 10
      this.getCrowdList()
    },
    search() {
      this.page = 1
      this.totalCount = 10
      this.getCrowdList()
    },
    cancel() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #DD0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #DD0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}

</style>

<style lang="scss">
.doumee-filter{
  margin-top: 10px;
}
</style>
